<template>
    <div class="mr-item">
        <router-link :to="'/room/' + r.room_id">
            <img :src="r.room_src" alt="">
            <div class="room-info">
                <span class="nickname">{{r.nickname}}</span>
                <span class="count">
                    <i class="fa fa-users"></i>
                    {{r.online |number}}
                </span>
            </div>
            <div class="room-title">
                <i class="fa fa-tv"></i>
                {{r.room_name | titles}}
            </div>
        </router-link>

    </div>
</template>
<script>
    export default{
        props:['r']
    }
</script>
<style lang="">
    .mr-item{
        margin-top: 10px;
        float: left;
        width: 4.3rem;
        margin-right: 0.3rem;
        position: relative;
    }
    .mr-item img{
        width: 100%;
        height: 2.6rem;
        border-radius: 5px; 
    }
    .room-info{
        position: absolute;
        bottom: 33px;
        color: #fff;
        padding: 0 5px;
        left: 0;
        right: 0;
        overflow: hidden;
        line-height: 24px;
        background-color: rgba(10, 10, 10, 0.5);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;

    }
    .room-info .count{
        float: right;
    }
    .room-title{
        line-height: 30px;
    }
</style>